$(function () {
  // 渲染导航栏内容
  $.ajax({
    url: "http://localhost:3000/api/getgsshop",
    success: function (res) {
      $('#shop ul').html(template('tmp1', res));
    }
  });
  $.ajax({
    url: "http://localhost:3000/api/getgsshoparea",
    success: function (res) {
      $('#area ul').html(template('tmp2', res));
    }
  });

  //封装渲染函数
  function render(shopid, areaid) {
    $.ajax({
      url: "http://localhost:3000/api/getgsproduct",
      data: {
        shopid: shopid,
        areaid: areaid
      },
      success: function (res) {
        $('.inner-item ul').html(template('tmp3', res));
      }
    });
  }

  let shopid = 0
  let areaid = 0
  // 首次渲染
  render(shopid, areaid);

  // 选中导航栏切换效果
  $('.shop').click(function () {
    $('#shop').toggle().siblings('div').hide();
  })
  $('.area').click(function () {
    $('#area').toggle().siblings('div').hide();
  })
  $('.total').click(function () {
    $('#total').toggle().siblings('div').hide();
  })

  //商店导航的渲染
  $('#shop').on('click', 'li', function () {
    $('#shop').hide();
    let txt = $(this).children('a').text();
    $('.on .shop').text(txt);
    shopid = $(this).data('id')
    render(shopid, areaid);
  })

  //地区导航的渲染
  $('#area').on('click', 'li', function () {
    $('#area').hide()
    let txt = $(this).children('a').text();
    $('.on .area').text(txt);
    areaid = $(this).data('id')
    render(shopid, areaid);
  })
  //全部导航的切换
  $('#total').on('click', 'li', function () {
    $('#total').hide()
  })

})